<template>
  <div class="total-user bg-c-base">
    <p>用户总数</p>
    <p class="sub-title">User Total Count</p>
    <p class="total">
      <count-to-hy :end-val="userTotal.userToday" suffix="" :decimals="0" />
    </p>
    <div class="percent-text">
      <span class="text-primary">
        每日增长率:
        <count-to-hy :end-val="userTotal.userLastDay" />
      </span>
      <span class="percent-text-2">
        每月增长率:
        <count-to-hy :end-val="userTotal.userLastMonth" />
      </span>
    </div>
    <div class="percent">
      <div class="percent-inner" :style="{ width: userTotal.percent }"></div>
    </div>
  </div>
</template>

<script>
import { reactive } from 'vue';
import mock from '@/hooks/mock';

export default {
	setup () {
		let { userTotal } = reactive(mock());
		return {
			userTotal,
		};
	},
};
</script>

<style lang="scss" scoped>
.total-user {
  width: 100%;
  height: 300px;
  box-shadow: 0 10px 10px rgb(0 0 0 / 30%);
  padding: 20px 40px;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.total {
  font-family: DIN;
  font-size: 68px;
  font-weight: bolder;
  letter-spacing: 2px;
  padding: 10px 0;
}
.percent-text {
  font-size: 28px;
  font-family: DIN;
  letter-spacing: 2px;
}
.percent-text-2 {
  color: #63a900;
  margin-left: 10px;
}
.percent {
  width: 100%;
  height: 20px;
  box-sizing: border-box;
  border: 1px solid #fff;
  margin-top: 10px;
}
.percent-inner {
  width: 0;
  height: 100%;
  background: #c5fb79;
  transition: all 1s linear;
}
</style>
